<template>
    <div>
        <h1>输出有数据的</h1>
        <div style="display: flex; align-items: center">
            缺少的：
            <input
                type="file"
                @change="loadFile($event, 'ex1')"
                accept=".xlsx, .xls"
                placeholder="Load EX1"
            />
        </div>
        <div style="display: flex; align-items: center">
            完整的：
            <input
                type="file"
                @change="loadFile($event, 'ex2')"
                accept=".xlsx, .xls"
                placeholder="Load EX2"
            />
        </div>
        <button @click="compareAndDownload">下载</button>
    </div>
</template>

<script>
import XLSX from "xlsx";

export default {
    data() {
        return {
            ex1Data: [],
            ex2Data: [],
        };
    },
    methods: {
        loadFile(event, type) {
            const file = event.target.files[0];
            const reader = new FileReader();

            reader.onload = (e) => {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data, { type: "array" });
                const firstSheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[firstSheetName];
                const jsonData = XLSX.utils.sheet_to_json(worksheet, {
                    header: 1,
                });

                if (type === "ex1") {
                    this.ex1Data = jsonData;
                    console.log("button类型：", this.ex1Data.length - 1, "个");
                } else if (type === "ex2") {
                    this.ex2Data = jsonData;
                    console.log("button类型：", this.ex2Data.length - 1, "个");
                }
            };

            reader.readAsArrayBuffer(file);
        },
        compareAndDownload() {
            const buttonsInEx1 = this.ex1Data.slice(1).map((row) => row[0]);
            const buttonsInEx2 = this.ex2Data.slice(1).map((row) => row[0]);

            const commonButtons = buttonsInEx1.filter((button) =>
                buttonsInEx2.includes(button)
            );

            const newWorkbook = XLSX.utils.book_new();
            const newData = [this.ex2Data[0]]; // 复制ex2的表头

            commonButtons.forEach((button) => {
                const rowInEx2 = this.ex2Data.find((row) => row[0] === button);
                newData.push(rowInEx2);
            });

            const newSheet = XLSX.utils.aoa_to_sheet(newData);
            XLSX.utils.book_append_sheet(newWorkbook, newSheet, "Sheet1");
            const data = new Date();
            const time = `${data.getFullYear()}-${
                data.getMonth() + 1
            }-${data.getDate()} ${data.getHours()}:${data.getMinutes()}:${data.getSeconds()}`;
            XLSX.writeFile(newWorkbook, `有数据号码对比-${time}.xlsx`);
        },
    },
};
</script>

<style scoped>
h1 {
    text-align: center;
}
input[type="file"] {
    display: block;
    margin: 20px auto;
}
button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
}
</style>
